<template>
	<view class="bg-white p-2">
		<view class="p-2" style="width: 2000rpx;">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<view class="flex align-center justify-between" style="width: 1500rpx;">
					<uni-forms-item :label-width="100" label="发票单号" name="name">
						<uni-data-select empty-text="暂无发票单号" placeholder="请选择发票单号" v-model="Selectvalue" :localdata="range" @change="change"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item name="age">
						<view class="flex align-center">
							<uni-easyinput style="width: 400rpx;" class="mr-4" v-model="valiFormData.age" placeholder="请输入合同号/客户名称 进行搜索" />
							<button style="width: 200rpx;height: 60rpx;line-height: 60rpx;" class="text-white bg-orange">搜索</button>
						</view>
					</uni-forms-item>
				</view>
				<view class="flex align-center justify-between" style="width: 1200rpx;">
					<uni-forms-item :label-width="100" label="起始时间:" name="name">
						<uni-datetime-picker style="width: 500rpx;white-space: nowrap;" type="date" :clear-icon="false" v-model="valiFormData.single" @maskClick="maskClick" />
					</uni-forms-item>
					<uni-forms-item  style="width: 400rpx;white-space: nowrap;" :label-width="100" label="结束时间:" name="age">
						<view class="flex align-center">
							<uni-datetime-picker style="width: 500rpx;" type="date" :clear-icon="false" v-model="valiFormData.single" @maskClick="maskClick" />
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
		    <!-- 表格 -->
		    <view class="mt-2 flex flex-column">
		    	<view class="w-100 flex font-sm font-weight-bold"
		    		style="background-color: rgb(245,245,245);height: 80rpx;">
		    		<view class="text-center" style="width: 14%;line-height: 80rpx;">
		    			<text>合同号</text>
		    		</view>
		    		<view class=" text-center" style="width: 18%;line-height: 80rpx;">
		    			<text>发票单号</text>
		    		</view>
		    		<view class=" text-center" style="width: 19%;line-height: 80rpx;">
		    			<text>购货单位名称</text>
		    		</view>
		    		<view class=" text-center" style="width: 12%;line-height: 80rpx;">
		    			<text>纳税人识别号</text>
		    		</view>
		    		<view class=" text-center" style="width: 12%;line-height: 80rpx;">
		    			<text>申请人</text>
		    		</view>
		    		<view class=" text-center" style="width: 9%;line-height: 80rpx;">
		    			<text>申请时间</text>
		    		</view>
					<view class=" text-center" style="width: 8%;line-height: 80rpx;">
						<text>发票状态</text>
					</view>
					<view class=" text-center" style="width: 8%;line-height: 80rpx;">
						<text>操作</text>
					</view>
		    	</view>
		    	<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
		    		暂无数据
		    	</view>
		    	<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
		    		v-for="(item,index) in 4" :key="index">
		    		<view class=" flex justify-center align-center" style="width: 14%;line-height: 70rpx;">
		    			<text>3151514651</text>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 18%;line-height: 70rpx;">
		    			<view class="flex justify-center">
		    				<text class="text-orange">6541516352023</text>
		    			</view>
		    		</view>
		    		<view class="flex align-center justify-center " style="width: 19%;line-height: 70rpx;">
		    			<view class="flex justify-center w-100">
		    				<text class="text-ellipsis " title="黑龙江集货邦数字供应有限公司">黑龙江集货邦数字供应有限公司</text>
		    			</view>
		    		</view>
					<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>46541625136</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>张三</text>
						</view>
					</view>
		    		<view class="flex align-center justify-center" style="width: 9%;line-height: 70rpx;">
		    			<view class="flex justify-center">
		    				<text>2018-08-31</text>
		    			</view>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
		    			<text>已发货</text>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 8%;line-height: 70rpx;">
		    			<button class="font-sm bg-success text-white flex justify-center align-center"
		    				style="white-space: nowrap; width: 100rpx;height: 100rpx;">查看</button>
		    			<button class="font-sm bg-danger text-white flex justify-center align-center"
		    				style="white-space: nowrap;width: 100rpx;height: 100rpx;">删除</button>
		    		</view>
		    	</view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ConsignmentInvoices",
		data() {
			return {
				valiFormData: {
					name: '',
					age: '',
					introduction: '',
					single:'',
				},
				Selectvalue:'',
				range: [],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '年龄只能输入数字'
						}]
					}
				},
			};
		},
		methods:{
			change(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">

</style>